<!--
 * @Author: ChunLai
 * @Date: 2022-04-19 10:12:25
 * @LastEditTime: 2025-11-20 11:24:01
 * @Description: 责任dutyPlanList转译为计划编码planCode
 * @FilePath: \01.latest-short-insure\src\views\form\components\premcount\dutyPlanList.vue
-->
<template>
  <div class="duty_list_ul">
    <div
      class="duty_list_li"
      v-for="(item, indx) in dutyList"
      :key="`${item.dutyCode || item.name}`"
    >
      <div class="duty_label_list">
        <div class="duty_item_label">
          <span class="item_label_txt">{{ item.label }}</span>
          <FieldDescMode
            :label="item.label"
            :desc="item.desc"
            v-if="item.desc"
          />
        </div>
        <!-- 单选项 -->
        <div class="duty_item_list">
          <SpanTwoRadio
            :curVal="item.isChecked"
            :indx="indx"
            @change="changeInsuNo"
          />
        </div>
      </div>
      <div v-if="item.isChecked">
        <div class="flex-lr cellItem" v-if="item.amnt">
          <span class="black9">基本保险金额</span>
          <div
            class="duty_amnt_input can_input"
            v-if="item.amntType && item.amntType == 'input'"
          >
            <input
              type="number"
              :placeholder="'请输入保额'"
              class="baofei"
              v-model="item.amnt"
              @blur="handleChangeDutyAmnt($event.target.value, item, indx)"
            />元
          </div>
          <div class="flex-lr" v-else>{{ item.amnt }} 元</div>
        </div>
        <div class="flex-lr cellItem" v-if="item.prem">
          <span class="black9">年交保费</span>
          <div class="flex-lr">{{ item.prem }} 元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SpanTwoRadio from "./SpanTwoRadio";
import FieldDescMode from "./FieldDescMode";
export default {
  name: "dutyPlanList",
  components: { SpanTwoRadio, FieldDescMode },
  props: {
    dutyList: {
      type: Array,
      default: () => [],
    },
    checks: {
      type: Array,
      default: () => [],
    },
    insuData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {},
  data() {
    return {};
  },
  methods: {
    handleChangeDutyAmnt(value, item, indx) {
      let errMsg = "";
      if (item.minamnt && value < item.minamnt) {
        value = item.minamnt;
        errMsg = `${item.label}\n最低保额${item.minamnt}元`;
      }
      if (item.maxamnt && value > item.maxamnt) {
        value = item.maxamnt;
        errMsg = `${item.label}\n最高保额${item.maxamnt}元`;
      }
      if (item.baseLevel && Number(value) % item.baseLevel !== 0) {
        value = item.minamnt || item.maxamnt;
        errMsg = `${item.label}\n保额需为${item.baseLevel}元的整数倍`;
      }
      if (errMsg) {
        this.$toast(errMsg);
      }
      this.handleChangeDuty(value, indx, "amnt");
    },
    changeInsuNo(value, index) {
      let errMsg = "";
      /* === 特殊校验规则 ==== */
      const dutys = JSON.parse(JSON.stringify(this.dutyList));
      // 1.安盛H27011
      const dutyObj = dutys[index];
      if (dutyObj.forbid) {
        const tobj = dutys.find((ele) => ele.dutyCode == dutyObj.forbid);
        if (tobj && tobj.isChecked) {
          errMsg = `投保'${tobj.label}'时， 不可投保 '${dutyObj.label}' `;
        }
      }
      if (errMsg) {
        return this.$toast(errMsg);
      }
      this.handleChangeDuty(value, index, "isChecked");
    },
    handleChangeDuty(val, index, target) {
      let duty = JSON.parse(JSON.stringify(this.dutyList));
      duty[index][target] = val;
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: "dutyPlanList",
        val: duty,
      });
      // console.log(val, index, item, key);
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.duty_list_ul {
  width: 100%;
  .duty_list_li {
    width: 100%;
    padding: 8px 0;
    &:not(:last-child) {
      border-bottom: 1px dashed #fee0d1;
    }
    .duty_item_label {
      display: flex;
      max-width: 70%;
      min-height: 30px;
    }
    .duty_label_list {
      display: flex;
      justify-content: space-between;
      .duty_item_list {
        flex-shrink: 0;
        margin-left: 10px;
      }
    }
  }
}

.cellItem {
  min-height: 30px;
}

.baofei {
  width: 100%;
  height: 30px;
  border: none;
  text-align: right;
  padding-right: 6px;
}

.subject-btns {
  justify-content: flex-end;
  width: 90px;
  margin-top: 6px;
}

.btn-span {
  min-width: 40px;
  height: 30px;
  color: #ffffff;
  border-radius: 4px;
  padding: 0 4px;
  background-color: #c2c2c2;

  &:not(:last-child) {
    margin-right: 6px;
  }

  &.btn-y {
    background-color: #fb8c89;
  }
}

.drop-down {
  display: flex;
  align-items: center;

  .jf_select {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    height: 30px;
    font-size: 14px;
    color: #333;
    border: 0;
    direction: rtl;
  }
}
.duty_amnt_input {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  &.can_input {
    border-bottom: 1px solid #e9ecee;
  }
}
.item_label_txt {
  padding-top: 3px;
}
</style>
